<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <el-image
          style="width: 180px; height: 100px"
          src="/images/login/logo.png"
          fit="contain"
        />
        <el-menu
          default-active="/employee/manage"
          class="el-menu-vertical-demo"
          :router=true
          v-on:select="methods.handleMenuSelect"
        >
          <el-menu-item index="/employee/manage" >
            <el-icon><User /></el-icon>
            <span>员工管理</span>
          </el-menu-item>
          <el-menu-item index="/category/manage">
            <el-icon><Files /></el-icon>
            <span>分类管理</span>
          </el-menu-item>
          <el-menu-item index="/dish/manage">
            <el-icon><Food /></el-icon>
            <span>菜品管理</span>
          </el-menu-item>
          <el-menu-item index="/setmeal/manage">
            <el-icon><Present /></el-icon>
            <span>套餐管理</span>
          </el-menu-item>
          <el-menu-item index="/orders/manage">
            <el-icon><List /></el-icon>
            <span>订单明细</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <el-row>
            <el-col :span="20">
              
              <span class="Title"> {{pageTitle}} </span>
            </el-col>
            <el-col :span="4">
              <div>
                <el-icon :size="32" @click="methods.logout">
                  <SwitchButton />
                </el-icon>
                <!-- 或者独立使用它，不从父级获取属性 -->
              </div>
            </el-col>
          </el-row>
          <!-- //
          <div class="right-menu">
              <div class="avatar-wrapper">用户名</div>
              <img src="../public/images/icons/btn_close@2x.png" class="outLogin" alt="退出"  />
            </div>
          // -->
        </el-header>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts">
import router from "@/router";
import { fill } from "lodash-es";
import { defineComponent, ref } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { employeeLogout } from "@/api/EmployeeLogin";
export default defineComponent({
  name: "LayoutPage",
  mounted() {
    console.log("mounted");
    // this.methods.requestData();
    
  },
  setup() {
    const pageTitle = ref("员工管理")
    const $router = useRouter();

    const methods = {
      handleOpen(key: string, keyPath: string[]) {
        console.log(key, keyPath);
      },
      handleClose(key: string, keyPath: string[]) {
        console.log(key, keyPath);
      },
      logout() {
        methods.requestData();
      },
      handleMenuSelect(index: string) {
        switch (index) {
          case "/employee/manage":
            pageTitle.value = "员工管理";
            break;
          case "/category/manage":
            pageTitle.value = "分类管理";
            break;
          case "/dish/manage":
            pageTitle.value = "菜品管理";
            break;
          case "/setmeal/manage":
            pageTitle.value = "套餐管理";
            break;
          case "/orders/manage":
            pageTitle.value = "订单管理(占位)";
            break;
        }
      },
      async requestData() {

        const { code, msg, data } = await employeeLogout();
        if (code == 200) {
          ElMessage({
            message: "注销成功" ,
            type: "success",
          });
          router.replace("/login");
        } else {
          // 网络层已提示信息
          // console.log(msg);
        }

      },
    };

    return {
      methods,
      pageTitle
    };
  },
});
</script>

<style>
.Title {
  margin-top: 20px;
  padding: 8px;
  color: #6b778c;
  font-size: 24px;
  font-weight: 600;
}
</style>
